<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 06</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo06：结构元素 & 渐变效果</h1>
    <ul>
        <li>Structual结构元素：svg, defs, g, symbol, use </li>
        <li>Gradient渐变效果：linearGradient和radialGradient</li>
    </ul>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="lg1"
                    x1="0" y1="0"
                    x2="0" y2="1"
                    spreadMethod="pad" gradientUnits="objectBoundingBox">
                    <stop offset="10%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="80%" stop-color="blue" stop-opacity="0.9"/>
                </linearGradient>
                <linearGradient id="lg2"
                    x1="0" y1="0"
                    x2="0" y2="1"
                    spreadMethod="reflect" gradientUnits="objectBoundingBox">
                    <stop offset="40%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="70%" stop-color="blue" stop-opacity="0.9"/>
                </linearGradient>
                <linearGradient id="lg3"
                    x1="0" y1="0"
                    x2="0" y2="1"
                    spreadMethod="repeat" gradientUnits="objectBoundingBox">
                    <stop offset="40%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="70%" stop-color="blue" stop-opacity="0.9"/>
                </linearGradient>
                <linearGradient id="lg4"
                    x1="0" y1="0"
                    x2="0" y2="60"
                    spreadMethod="pad" gradientUnits="userSpaceOnUse">
                    <stop offset="40%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="70%" stop-color="blue" stop-opacity="0.9"/>
                </linearGradient>


                <radialGradient id="rg1"
                    fx="50%" fy="50%" r="30%"
                    spreadMethod="pad" gradientUnits="objectBoundingBox">
                    <stop offset="10%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="80%" stop-color="blue" stop-opacity="0.9"/>
                </radialGradient>
                <radialGradient id="rg2"
                    fx="50%" fy="50%" r="30%"
                    spreadMethod="reflect" gradientUnits="objectBoundingBox">
                    <stop offset="10%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="80%" stop-color="blue" stop-opacity="0.9"/>
                </radialGradient>
                <radialGradient id="rg3"
                    fx="50%" fy="50%" r="30%" cx="60%" cy="60%"
                    spreadMethod="repeat" gradientUnits="objectBoundingBox">
                    <stop offset="10%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="80%" stop-color="blue" stop-opacity="0.9"/>
                </radialGradient>
                <radialGradient id="rg4"
                    fx="50%" fy="50%" r="30%" cx="60%" cy="60%"
                    spreadMethod="repeat" gradientUnits="objectBoundingBox" gradientTransform="rotate(180)">
                    <stop offset="10%" stop-color="red" stop-opacity="1"/>
                    <stop offset="50%" stop-color="orange" stop-opacity="0.7"/>
                    <stop offset="80%" stop-color="blue" stop-opacity="0.9"/>
                </radialGradient>
            </defs>
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#lg1)" stroke="url(#lg1)" stroke-width="5"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#lg2)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#lg3)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#lg4)"></rect>
        </svg>
    </div>


    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#rg1)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#rg2)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#rg3)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#rg4)"></rect>
        </svg>
    </div>



    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g id="g1" fill="red"  stroke="orange" stroke-width="5">
                 <rect x="30" y="40" width="60" height="40"></rect>
                 <rect x="55" y="10" width="10" height="110"></rect>
            </g>

            <symbol id="s1" viewBox="0,0,120,120" fill="red"  stroke="orange" stroke-width="5">
                 <rect x="30" y="40" width="60" height="40"></rect>
                 <rect x="55" y="10" width="10" height="110"></rect>
            </symbol>

            <use xlink:href="#s1" x="50" y="50" width="100" height="50"/>
        </svg>
    </div>




</body>

</html>